<!-- 使用例子
<pb-line></pb-line>
<pb-line direction="v"></pb-line>
<pb-line direction="v" padding="24rpx 32rpx" borderStyle="dashed"></pb-line> -->

<template>
	<view class="pb-line-page">
		<template v-if="direction == 'v'">
			<view :style="styleItemV">
				<view :style="styleBorderRight"></view>
			</view>
		</template>
		<template v-else-if="text">
			<view class="tips" :style="styleItemH">
				<view :style="styleBorderBottom"></view>
				<text v-if="text" class="text" :style="'backgroundColor:'+backgroundColor+';'+textStyle">{{text}}</text>
			</view>
		</template>
		<template v-else>
			<view :style="styleItemH">
				<view :style="styleBorderBottom"></view>
			</view>
		</template>
	</view>

</template>

<script>
	export default {
		name: "pb-line",
		props: {
			padding: {
				type: String,
				default: "0rpx", //线的内边距
				require: false,
			},
			backgroundColor: {
				type: String,
				default: "white", //线背景色
				require: false,
			},
			direction: {
				type: String,
				default: "h", //h：横向  v:竖向
				require: false
			},
			color: {
				type: String,
				default: "#E1E4E9", //线颜色
				require: false
			},
			borderStyle: {
				type: String,
				default: "solid", //线样式solid：实线 dashed:虚线  dotted:点线
				require: false
			},
			text: {
				type: String,
				default: null
			},
			textStyle: {
				type: String,
			}
		},
		computed: {
			styleItemV() {
				let styleItemV = 'padding:' + this.padding + ';height:100%; background-color:' + this.backgroundColor + ';'
				return styleItemV
			},
			styleItemH() {
				let padding = this.padding
				if(this.text && (this.padding == '0'||this.padding == '0rpx')) {
					padding = '20rpx 0';
				}
				let styleItemH = 'padding:' + padding + ';width:100%; background-color:' + this.backgroundColor + ';'
				return styleItemH
			},
			styleBorderRight() {
				let styleBorderRight = 'height: 100%;background-color: transparent;border-right: 2rpx ' + this
					.borderStyle + ' ' + this.color + ';'
				return styleBorderRight
			},
			styleBorderBottom() {
				let styleBorderBottom = 'background-color: transparent;border-bottom: 2rpx ' + this.borderStyle + ' ' +
					this.color + ';'
				return styleBorderBottom
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	// 在微信小程序中,在设置竖线的时候每个节点的高度都要设置为100%才能够传递，
	// 不然竖线无法显示（默认高度为内容高度无法100%）
	/* #ifdef MP-WEIXIN */
	.pb-line-page {
		height: 100%;
	}
	/* #endif */
	
	.tips {
		position: relative;
		white-space: nowrap;
		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			font-size: 28rpx;
			padding: 0 16rpx;
			color: $text-auxiliary;
		}
	}
	
</style>
